<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" append-to-body width="750" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="drawerForm" label-width="85px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入登录账号" clearable :disabled="mode=='edit'"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入真实姓名" maxlength="30" />
          </el-form-item>
          <el-form-item label="所属部门" prop="deptId">
            <jd-cascader v-model="form.deptId" :apiObj="$API.system.dept.tree" :apiProps="{label:'label',value: 'id', expandTrigger: 'hover'}" style="width: 100%;" placeholder="请选择..."></jd-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="mode == 'add'">
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码" clearable show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="password2">
            <el-input type="password" v-model="form.password2" placeholder="请确认密码" clearable show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
		<el-row :gutter="15">
			<el-col :span="12">
				<el-form-item label="用户专业" prop="major">
					<el-input v-model="form.major" placeholder="请输入专业" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="用户籍贯" prop="nativePlace">
					<el-input v-model="form.nativePlace" placeholder="请输入籍贯" clearable></el-input>
				</el-form-item>
			</el-col>
		</el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <jd-radio v-model="form.sex" dict="sys_user_sex"></jd-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号角色" prop="roles">
            <jd-select v-model="form.roles" :apiObj="$API.system.role.list" :params="{roleType: 1}"  clearable filterable multiple="true" collapse-tags :apiProps="{label:'roleName',value: 'roleId'}" style="width: 100%;" placeholder="请选择..."></jd-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <jd-radio v-model="form.status" dict="sys_normal_disable"></jd-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  props:{
    deptId: { type: Number, default: 0 },
  },
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增用户",
        edit: "编辑用户",
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        memberId: "",
        avatar: "",
        userName: "",
        nickName: "",
        name: "",
        password: "",
        deptId: null,
        posts: [],
        roles: [],
        phone: "",
        email: "",
        status: 0,
        sex: "0"
      },
      //验证规则
      rules: {
        userName: [
          { required: true, message: "请输入登录账号" },
          { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }
        ],
        nickName: [{ required: true, message: "用户昵称不能为空" }],
        name: [{ required: true, message: "请输入真实姓名" }],
        password: [
          { required: true, message: "请输入登录密码" },
          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.form.password2 !== "") {
                this.$refs.drawerForm.validateField("password2")
              }
              callback()
            }
          }
        ],
        password2: [
          { required: true, message: "请再次输入密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致!"))
              } else {
                callback()
              }
            }
          }
        ],
        deptId: [{ required: true, message: "请选择所属部门" }],
        roles: [{ required: true, message: "请选择所属角色" }],
        phone: [
          {
			      required:true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      // 所有角色
      roles: [],
      // 所有岗位
      posts: [],
      // 所有部门
      depts: [],
      deptsProps: {
		    multiple: false,
        value: "id",
        checkStrictly: true,
        emitPath: false
      }
    }
  },
  mounted() {
    this.getGroup()
    this.getDept()
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode
      if (this.deptId!=0){
        this.form.deptId = this.deptId;
      }
      this.visible = true
      return this
    },
    //加载树数据
    async getGroup() {
      // var res = await this.$API.system.role.list.get()
      let form = {}
      form.roleType = 1;
      let res = await this.$API.system.role.list.get(form)
      if (res.code === 200) {
        this.roles = res.data.rows
      }
    },
    async getDept() {
      var res = await this.$API.system.dept.tree.get()
      this.depts = res.data
    },
    //表单提交方法
    submit() {
      this.$refs.drawerForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          // this.form.roleIds = this.form.roleIds.toString().split(",")
          const form = { ...this.form }
          delete form.password2
          var res
          if (this.mode == "add") {
            res = await this.$API.system.member.addUser.post(form)
          } else if (this.mode == "edit") {
            res = await this.$API.system.member.updateUser.put(form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode)
            this.visible = false
            this.$message.success("操作成功")
          } else {
            this.$alert(res.msg, "提示", { type: "error" })
          }
        } else {
          return false
        }
      })
    },
    //表单注入数据
    async setData(data) {
      Object.assign(this.form, data)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  padding: 20px;
  overflow-y: auto;
}
</style>
